<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart" class="inMain" style="width: 46px;height: 50px;"></div>
	</div>
</template>

<script>
	export default {
		props:['monNum'],
		name: 'monitoringEc3r',
		methods: {
			myEcharts() {
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart); //通过ref获取到DOM节点
				let percent = this.monNum
				if (myChart == null) {
					myChart = this.$echarts.init(this.$refs.myChart); //利用原型调取Echarts的初始化方法
				}
				//配置图表
				const option = {
					title: {
						show:true,
						text: `${percent}`,
						left: 'center',
						top: '30%',
						textStyle: {
							color: '#62F2E6 ',
							fontSize: 14
						}
					},
					polar: {
						radius: ['89%', '99%'],
						center: ['50%', '50%']
					},
					// 极坐标角度轴
					angleAxis: {
						min: 0,
						max: 100,
						type:'value',
						clockwise: true,
						show: false, // 隐藏刻度线,
						axisLabel: {
							show: false,
							color: "rgba(234, 41, 41, 1)"
						},
					},
					// 极坐标径向轴
					radiusAxis: {
						type: 'category',
						// 隐藏极坐标轴线
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
						      show: false
						    }
					},
					tooltip: {
						show: false,
					},
					series: [{
						// 进度条
						type: 'bar',
						coordinateSystem: 'polar',
						label:{
							 show: false,
							 color: 'rgba(31, 196, 225, 0.6)',
							 fontSize: 14
						},
						// 设置柱子背景灰色，需开启showBackground才能显示backgroundStyle
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(255,255,255, 0.15)'
						},
						// 两端设置圆角
						roundCap: true,
						data: [65],
						itemStyle:{
							color:new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
							                    offset: 0,
							                    color: '#62F2E6'
							                }, {
							                    offset: 1,
							                    color: '#29DBF8' 
							                }], false),
						}
					}, {
						// 刻度线设置
						type: 'gauge',
						name: '',
						radius: 45,
						center: ['50%', '50%'],
						startAngle: 0,
						endAngle: 360,
						silent: false,
						splitNumber: 4,
						splitLine: {
						      lineStyle: {
								type: [5, 10],
								dashOffset: 10,
						        width: 2,
								color: "rgba(203, 203, 203, 1.0)",
								cap:"butt"
						      }
						    },
						// 是否显示仪表盘数据
						detail: {
							show: false
						},
						pointer: {
							show: false
						},
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false,
						},
						data: [65],
						z: 10,
					}]
				};
				myChart.setOption(option); //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
					myChart.resize(); //页面大小变化后Echarts也更改大小
				});
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style>

</style>
